<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.Less基础

            3.2 Less介绍

            less ( Leaner Style Sheets 的缩写）是一门CSS扩展语言，也成为CSS预处理器。

            做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

            它在CSS的语法基础之上，引入了变量，Mixin(混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，
            就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情

            Less中文网址: http://lesscss.cn/

            常见的CSS预处理器: Sass、Less、Stylus

            一句话:Less是一门CSS预处理语言，它扩展了CSS的动态特性。


        Less使用

            我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

            Less变量
            
            Less编译
            
            Less嵌套
            Less运算


        3.4 Less变量

            变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

                @变量名:值;

            1.变量命名规范

                必须有@为前缀
                
                不能包含特殊字符
                
                不能以数字开头
                
                大小写敏感


        3.5 Less编译

            本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

            所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

        
        3.5 Less 编译

            vocode Less插件★

            Easy LESS插件用来把less文件编译为css文件
            安装完毕插件，重新加载下vscode,只要保存一下Less文件，会自动生成CSS文件。
            然后将生成的css文件引入html文件中即可

        
        3.6 Less嵌套

            我们经常用到选择器的嵌套

            #header .logo {
                width: 300px;
            }

            Less嵌套写法

            #header {
                .logo {
                    width: 300px;
                }
            }


        3.6 Less嵌套

            如果遇见（交集|伪类|伪元素选择器)

                内层选择器的前面没有&符号，则它被解析为父选择器的后代;
                如果有&符号，它就被解析为父元素自身或父元素的伪类。

            a:hover{
                color: red;
            }

            Less嵌套写法

            a {
                &:hover{
                    color: red;
                )
            )

        3.7 Less运算★

            注意:

            乘号(*)和除号(/)的写法

            运算符中间左右有个空格隔开1px + 5

            对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
            
            如果两个值之间只有一个值有单位，则运算结果就取该单位

            除法要用括号括起来


     -->


</body>
</html>